import React, { Component } from 'react'
// 引入组件
import { CSSTransition, TransitionGroup} from "react-transition-group";
import "./css3.css";
import "./Csstransition.css";

class CssTransition3 extends Component {
    constructor(){
        super();
        this.state = {
            list:[
                { id: 1, text: 'Buy eggs' },
                { id: 2, text: 'Pay bills' },
                { id: 3, text: 'Invite friends over' },
                { id: 4, text: 'Fix the TV' },
              ]
        }
    }
    del(index){
        let arr = this.state.list;
        arr.splice(index,1)
        this.setState({
            list:arr
        })
    }
    render() {
        return (
            <div>
                <TransitionGroup className="todo-list">
                   {this.state.list.map((item,index)=>{
                       return (
                           <CSSTransition key={index} timeout={500} classNames="item">
                               <div>
                                   <button  onClick={()=> this.del(index)}>X</button>
                                   <span>{item.text}</span>
                               </div>
                           </CSSTransition>
                       )
                   })}
                    
                </TransitionGroup>
            </div>
        )
    }
}


export default CssTransition3